<script setup>
const picList = [
  {
    img: "https://res.insta360.com/static/4be66009a5e319d0c4df93efcebc08c8/go3-sc.svg",
    bgImg:
      "https://res.insta360.com/static/34dbd2b38f6249a1dc56d7677b3a52ea/go3_index_kv.jpg",
  },
  {
    img: "https://res.insta360.com/static/8f099b7feca2a51f3f3cac8fb67d19c0/Flow_Logo&Slogan_Online_Black_SC.svg",
    bgImg:
      "https://res.insta360.com/static/0d0405b8483e0ddb9a8beee03d7ed5b8/flow.jpg",
  },
  {
    img: "https://res.insta360.com/static/infr_base/22153548578658d61b578b2a3f4099de/SC.svg",
    bgImg:
      "https://res.insta360.com/static/fbe657b484a6eaf682924277b18d5521/home_link.jpg",
  },
  {
    img: "https://res.insta360.com/static/4be66009a5e319d0c4df93efcebc08c8/go3-sc.svg",
    bgImg:
      "https://res.insta360.com/static/db04c0f2f647e735df76374b753a5c1e/insta360_1inch_360.jpg",
  },
];
</script>

<template>
  <Container>
    <div class="relative h-[220px] rounded-[20px] bg-[#f3f4f8] mt-[50px]">
      <img
        class="absolute z-10 left-[40px] top-[80px]"
        src="https://res.insta360.com/static/50da04d1d580df40e75950eea3d8ba2c/ace-sc.svg"
        alt=""
      />
      <img
        class="absolute z-100 right-[50px] bottom-[50px] h-[210px]"
        src="https://res.insta360.com/static/5ec8ec1805403466e4cec27492fdcf18/acepro.png"
        alt=""
      />
    </div>
    <div class="relative h-[200px] lg:h-[605px] my-[40px]">
      <div class="rounded-[20px] overflow-hidden">
        <video
          class="object-fill h-[605px] w-[100%]"
          preload="auto"
          autoplay="autoplay"
          muted="muted"
          loop="loop"
          poster="https://res.insta360.com/static/infr_base/fac51a6a7809f3f314050dd5d08b6a7c/x3_highlights.jpg"
          src="https://media.insta360.com/static/infr_base/4905b9fa5c4fad709f4e44784f48ec3b/www-index4.mp4"
        ></video>
      </div>
      <img
        class="h-[68px] absolute left-[100px] top-[220px]"
        src="https://res.insta360.com/static/infr_base/fdd5542e4f808f6ca280b81f3c38bcb3/sc.svg"
        alt=""
      />
      <img
        class="w-[280px] absolute right-[100px] bottom-[-20px]"
        src="https://res.insta360.com/static/infr_base/dbf2d585291338121c45e3bd8dde3860/x3_2x.png"
        alt=""
      />
    </div>
    <div
      class="grid grid-cols-1 lg:grid-cols-2 gap-[30px] pb-[40px] overflow-hidden"
    >
      <div
        v-for="(item, index) in picList"
        :key="index"
        class="relative bg-[#f3f4f8] h-[284px] rounded-[20px] bg-no-repeat bg-cover bg-[right]"
        :style="{ backgroundImage: 'url(' + item.bgImg + ')' }"
      >
        <img
          class="absolute top-[110px] left-[50px]"
          :src="item.img"
          alt="insta360.com"
        />
      </div>
    </div>
    <div class="rounded-[20px] overflow-hidden">
      <img
        src="https://res.insta360.com/static/d61f7f87dd4df7e9fe0a0e613098ef94/SC.jpg"
        alt=""
      />
    </div>
  </Container>
</template>
